<template>
    <!--<el-tabs v-model="activeName" style="" type="border-card" id="missiontabs">-->
        <!--<el-tab-pane label="任务监控" name="first">-->
            <el-container class="mycontainer">
                <el-main style="height: 100%;width: 80%;margin: 3% 12% 0;overflow: hidden" :class="fitContent">
                    <el-table :data="tableData"  style="overflow: auto" >
                        <el-table-column
                                prop="remarks"
                                label="任务名称"
                                width="220">
                        </el-table-column>
                        <el-table-column
                                prop="submitTime"
                                label="创建时间"
                                width="180"
                                :formatter="transDate"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="state"
                                label="任务状态"
                                width="180"
                                align="center">
                            <template slot-scope="scope">
                                <el-button icon='el-icon-loading'
                                           type="primary"
                                           v-if="scope.row.state=='UNDEFINED'"
                                           circle>
                                </el-button>
                                <el-button icon='el-icon-close'
                                           v-if="scope.row.state=='FAILED' || scope.row.state=='KILLED'"
                                           type="danger"
                                           circle>
                                </el-button>
                                <el-button icon='el-icon-check'
                                           v-if="scope.row.state=='SUCCEEDED'"
                                           type="success"
                                           circle>
                                </el-button>
                            </template>
                        </el-table-column>
                        <!--在表格内转换形式 formatter-->
                        <el-table-column
                                prop="finishTime"
                                label="结束时间"
                                :formatter="dateTrans"
                                width="180"
                                align="center">
                        </el-table-column>
                        <el-table-column width="fit-content" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        title="终止"
                                        :disabled="scope.row.state=='SUCCEEDED'||scope.row.state=='FAILED'"
                                        icon="el-icon-error"
                                        @click="killJob(scope.$index,scope.row)"
                                        type="text"
                                        class=delBtn>
                                    <!--<i class="el-icon-delete-solid"></i>-->
                                </el-button>
                                <!--<el-button-->
                                        <!--:disabled="scope.row.state!=='SUCCEEDED'"-->
                                        <!--title="预览"-->
                                        <!--icon="el-icon-notebook-2"-->
                                        <!--@click="previewDataSet(scope.$index,scope.row)"-->
                                        <!--type="text">-->
                                    <!--&lt;!&ndash;<i class="el-icon-delete-solid"></i>&ndash;&gt;-->
                                <!--</el-button>-->
                                <el-button
                                        title="日志"
                                        icon="el-icon-s-order"
                                        @click="showDataSetLog(scope.$index,scope.row)"
                                        type="text">
                                </el-button>
                                <el-button
                                        title="删除"
                                        icon="el-icon-delete"
                                        @click="deleteJob(scope.$index,scope.row)"
                                        type="text">
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer style="text-align: center;">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNo"
                            :page-sizes="[8, 16, 24, 32]"
                            :page-size="pageSize"
                            background
                            layout="prev, pager, next"
                            :total=this.totalCount>
                    </el-pagination>
                </el-footer>
                <logDialog></logDialog>
            </el-container>
        <!--</el-tab-pane>-->
        <!--<el-tab-pane label="工作流监控" name="second">-->
            <!--<el-container style="height: 100%">-->
                <!--<el-main style="height:90%;width: 70%;margin: 3% 14% 0;overflow: hidden;">-->
                    <!--<el-table :data="tableData2" style="overflow: auto;height: 100%;max-height:490px" id="monitorTable2"-->
                              <!--:row-key='getRowKeys'-->
                              <!--:expand-row-keys="expands"-->
                              <!--@expand-change="getConsole"-->
                    <!--&gt;-->
                        <!--<el-table-column type="expand" width="15">-->
                            <!--<template slot-scope="props">-->
                                <!--<el-table class="consoleTable"-->
                                          <!--:data="consoleTable"-->
                                          <!--current-row-key-->
                                          <!--width="100%">-->
                                    <!--<el-table-column-->
                                            <!--prop="rowIndex"-->
                                            <!--type="index"-->
                                            <!--label="子任务"-->
                                            <!--width="70"-->
                                            <!--align="center">-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column-->
                                            <!--prop="name"-->
                                            <!--label="子任务名称"-->
                                            <!--width="160"-->
                                            <!--align="center">-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column-->
                                            <!--prop="status"-->
                                            <!--label="子任务状态"-->
                                            <!--width="120"-->
                                            <!--align="center">-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column-->
                                            <!--prop="starttime"-->
                                            <!--label="开始时间"-->
                                            <!--width="150"-->
                                            <!--align="center">-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column-->
                                            <!--prop="endtime"-->
                                            <!--label="结束时间"-->
                                            <!--width="150"-->
                                            <!--align="center">-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column width="fit-content" align="center" label="操作">-->
                                        <!--<template slot-scope="scope">-->
                                            <!--<el-button-->
                                                    <!--title="日志"-->
                                                    <!--:disabled="scope.row.status=='SUCCEEDED'||scope.row.status=='FAILED'"-->
                                                    <!--icon="el-icon-document"-->
                                                    <!--@click="jobLog(scope.$index,scope.row)"-->
                                                    <!--type="text"-->
                                                    <!--class=delBtn>-->
                                                <!--&lt;!&ndash;<i class="el-icon-delete-solid"></i>&ndash;&gt;-->
                                            <!--</el-button>-->
                                            <!--<el-button-->
                                                    <!--title="详情"-->
                                                    <!--icon="el-icon-info"-->
                                                    <!--@click="jobInfo(scope.$index,scope.row)"-->
                                                    <!--type="text">-->
                                            <!--</el-button>-->
                                        <!--</template>-->
                                    <!--</el-table-column>-->
                                <!--</el-table>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <!--<el-table-column-->
                                <!--prop="name"-->
                                <!--label="任务名称"-->
                                <!--width="250">-->
                        <!--</el-table-column>-->
                        <!--<el-table-column-->
                                <!--prop="starttime"-->
                                <!--label="创建时间"-->
                                <!--width="180"-->
                                <!--align="center">-->
                        <!--</el-table-column>-->
                        <!--<el-table-column-->
                                <!--prop="status"-->
                                <!--label="任务状态"-->
                                <!--width="180"-->
                                <!--align="center">-->
                            <!--<template slot-scope="scope">-->
                                <!--<el-button icon='el-icon-loading'-->
                                           <!--type="primary"-->
                                           <!--v-if="scope.row.status=='running'"-->
                                           <!--circle>-->
                                <!--</el-button>-->
                                <!--<el-button icon='el-icon-check'-->
                                           <!--v-else-if="scope.row.status=='success'"-->
                                           <!--type="success"-->
                                           <!--circle>-->
                                <!--</el-button>-->
                                <!--<el-button icon='el-icon-close'-->
                                           <!--v-else="scope.row.status=='failed'"-->
                                           <!--type="danger"-->
                                           <!--circle>-->
                                <!--</el-button>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <!--&lt;!&ndash;在表格内转换形式 formatter&ndash;&gt;-->
                        <!--<el-table-column-->
                                <!--prop="endtime"-->
                                <!--label="结束时间"-->
                                <!--width="200"-->
                                <!--align="center">-->
                        <!--</el-table-column>-->
                        <!--<el-table-column width="fit-content" align="center" label="操作">-->
                            <!--<template slot-scope="scope">-->
                                <!--&lt;!&ndash;<el-button&ndash;&gt;-->
                                <!--&lt;!&ndash;title="终止"&ndash;&gt;-->
                                <!--&lt;!&ndash;:disabled="scope.row.state=='SUCCEEDED'||scope.row.state=='FAILED'"&ndash;&gt;-->
                                <!--&lt;!&ndash;icon="el-icon-error"&ndash;&gt;-->
                                <!--&lt;!&ndash;@click="killWorkFlow(scope.$index,scope.row)"&ndash;&gt;-->
                                <!--&lt;!&ndash;type="text"&ndash;&gt;-->
                                <!--&lt;!&ndash;class=delBtn>&ndash;&gt;-->
                                <!--&lt;!&ndash;&lt;!&ndash;<i class="el-icon-delete-solid"></i>&ndash;&gt;&ndash;&gt;-->
                                <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
                                <!--<el-button-->
                                        <!--title="刷新子任务状态"-->
                                        <!--icon="el-icon-refresh"-->
                                        <!--@click="refreshWorkFlowJobs(scope.$index,scope.row)"-->
                                        <!--type="text">-->
                                    <!--&lt;!&ndash;<i class="el-icon-delete-solid"></i>&ndash;&gt;-->
                                <!--</el-button>-->

                                <!--<el-button-->
                                        <!--title="删除"-->
                                        <!--icon="el-icon-delete"-->
                                        <!--@click="deleteworkflow(scope.$index,scope.row)"-->
                                        <!--type="text">-->
                                <!--</el-button>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                    <!--</el-table>-->
                <!--</el-main>-->
                <!--<el-footer style="text-align: center">-->
                    <!--<el-pagination-->
                            <!--@size-change="handleSizeChange2"-->
                            <!--@current-change="handleCurrentChange2"-->
                            <!--:current-page="pageNo2"-->
                            <!--:page-sizes="[8, 16, 24, 32]"-->
                            <!--:page-size="pageSize2"-->
                            <!--background-->
                            <!--layout="prev, pager, next"-->
                            <!--:total=this.totalCount2>-->
                    <!--</el-pagination>-->
                <!--</el-footer>-->
                <!--<job-info></job-info>-->
                <!--<logDialog2></logDialog2>-->
            <!--</el-container>-->
        <!--</el-tab-pane>-->
    <!--</el-tabs>-->

</template>

<script>
    import logDialog from '../space/logDialog'
    import logDialog2 from '../space/logDialog2'
    import jobInfo from '../toolbox/jobInfo'

    export default {
        name: "missionManager",
        data() {
            return {
                getRowKeys(row) {
                    return row.id
                },
                tableData: [],
                pageSize: 8,
                pageNo: 1,
                totalCount: 0,
                consoleTable: [],
                activeName: 'first',
                tableData2: [],
                pageSize2: 8,
                pageNo2: 1,
                totalCount2: 0,
                expands: []
            }
        },
        computed: {
            fitContent() {
                if (window.screen.height >= 1000) {
                    return 'longWindow'
                } else {
                    return 'shortWindow'
                }
            }
        },
        watch: {
            pageSize() {
                this.getMonitorTable();
            },
            pageNo() {
                this.getMonitorTable();
            },
            pageSize2() {
                this.getWorkflowTable();
            },
            pageNo2() {
                this.getWorkflowTable();
            }
        },
        components: {
            logDialog,
            jobInfo,
            logDialog2
        },
        computed: {
            fitContent() {
                if (window.screen.height >= 1000) {
                    return 'longWindow'
                } else {
                    return 'shortWindow'
                }
            }
        },
        methods: {
            // refreshWorkFlowJobs(index, row) {
            //     let url = "http://192.168.1.5:9500/dbfg/workflow/tasks/" + row.id + "/jobs";
            //     let that = this;
            //     this.$axios.get(url).then(res => {
            //         if (res.code === 200) {
            //             that.consoleTable = res.body;
            //         }
            //     }).catch(function (errer) {
            //
            //     })
            // },
            // jobLog(index, row) {
            //     let that = this;
            //     let url = this.$URL.parallelLogUrl + row.id;
            //     this.$axios.get(url).then(res => {
            //         if (res.code === 200) {
            //             that.$Bus.$emit('log2', {visible: true, data: res.body});
            //         } else {
            //             that.$message({
            //                 type: 'warning',
            //                 message: res.message
            //             })
            //         }
            //     }).catch(function (error) {
            //         console.log(error);
            //         that.$message.error('获取任务日志失败！')
            //     })
            // },
            jobInfo(index, row) {
                this.$Bus.$emit("jobInfo", row.id);
            },
            // getConsole(row, expandedRows) {
            //     let that = this;
            //     if (expandedRows.length) {
            //         that.expands = [];
            //         if (row) {
            //             that.expands.push(row.id);
            //             // that.expands.push(row);
            //         }
            //     } else {
            //         that.expands = []
            //     }
            //
            //     this.consoleTable = [];
            //     let url = "http://192.168.1.5:9500/dbfg/workflow/tasks/" + row.id + "/jobs";
            //     this.$axios.get(url).then(res => {
            //         if (res.code === 200) {
            //             that.consoleTable = res.body;
            //         }
            //     }).catch(function (errer) {
            //
            //     })
            // },
            // killWorkFlow(index, row) {
            //
            // },

            // deleteworkflow(index, row) {
            //     let that = this;
            //     this.$confirm('是否删除该任务？', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         let url = "http://192.168.1.5:9500/dbfg/workflow/tasks/delete/" + row.id
            //         // let url = 'http://192.168.1.5:9000/dbfg/parallel/jobs/' + row.applicationId + '/delete';
            //         this.$axios.delete1(url).then(res => {
            //             if (res.code === 200) {
            //                 that.tableData2 = [];
            //                 that.getWorkflowTable();
            //             } else {
            //                 that.$message({
            //                     type: 'warning',
            //                     message: res.message
            //                 })
            //             }
            //         }).catch(function (error) {
            //             console.log(error);
            //             that.$message.error('删除任务失败！')
            //         })
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消删除'
            //         });
            //     });
            // },
            // openConsoleDialog(row) {
            //     let that = this;
            //     let url = "http://192.168.1.5:9500/dbfg/workflow/tasks/" + row.id + "/jobs";
            //     this.$axios.get(url).then(res => {
            //         if (res.code === 200) {
            //             that.consoleTable = res.body.result;
            //         }
            //     }).catch(function (errer) {
            //
            //     })
            // },
            dateTrans(row) {
                if (row.finishTime === '') {
                    return ''
                } else {
                    return this.$date.dateFormat(parseInt(row.finishTime));
                }
            },
            transDate(row) {
                return this.$date.dateFormat(parseInt(row.submitTime));
            },
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.pageNo = val;
            },
            // handleSizeChange2(val) {
            //     this.pageSize2 = val;
            // },
            // handleCurrentChange2(val) {
            //     this.pageNo2 = val;
            // },
            getMonitorTable() {
                let that = this;
                let url = this.$URL.parallelAllJobUrl + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.code === 200) {
                        for (let row of res.body.result) {
                            that.tableData = res.body.result;
                            if (row.state === "UNDEFINED") {
                                let superviseTimer = setInterval(function () {
                                    let url = that.$URL.parallelJobUrl + row.applicationId;
                                    that.$axios.get(url)
                                        .then(function (response) {
                                            if (response.code !== 200) {
                                                clearInterval(superviseTimer);
                                            } else {
                                                if (response.body.state !== 'UNDEFINED') {
                                                    clearInterval(superviseTimer);
                                                    if (response.body.state === "FAILED"
                                                        || response.body.state === "KILLED") {
                                                        //没有成功的话，没有完成时间
                                                        row.state = "FAILED";
                                                        row.finishTime = response.body.finishTime;
                                                    } else {
                                                        row.state = "SUCCEEDED";
                                                        row.finishTime = response.body.finishTime;
                                                    }
                                                }
                                            }
                                        })
                                }, 3000);
                            } else {

                            }
                        }
                        that.totalCount = parseInt(res.body.totalCount);
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error('未获取到数据!');
                })
            },
            // previewDataSet(index, row) {
            //     this.$message('请前往个人数据集查看结果');
            // },
            showDataSetLog(index, row) {
                let that = this;
                let url = this.$URL.parallelLogUrl + row.applicationId;
                this.$axios.get(url).then(res => {
                    if (res.code === 200) {
                        that.$Bus.$emit('log', {visible: true, data: res.body});
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error('获取任务日志失败！')
                })
            },
            killJob(index, row) {
                let that = this;
                this.$confirm('是否终止该任务？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = this.$URL.parallelKillUrl + row.applicationId;
                    // let url = 'http://192.168.1.5:9000/dbfg/parallel/kill/' + row.applicationId;
                    this.$axios.post(url).then(res => {
                        if (res.code === 200) {
                            that.tableData = [];
                            that.getMonitorTable();
                        } else {
                            that.$message({
                                type: 'warning',
                                message: res.message
                            })
                        }
                    }).catch(function (error) {
                        console.log(error);
                        that.$message.error('终止任务失败！')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消终止'
                    });
                });
            },
            deleteJob(index, row) {
                let that = this;
                this.$confirm('是否删除该任务？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = this.$URL.parallelJobUrl + row.applicationId + '/delete';
                    // let url = 'http://192.168.1.5:9000/dbfg/parallel/jobs/' + row.applicationId + '/delete';
                    this.$axios.delete1(url).then(res => {
                        if (res.code === 200) {
                            that.tableData = [];
                            that.getMonitorTable();
                        } else {
                            that.$message({
                                type: 'warning',
                                message: res.message
                            })
                        }
                    }).catch(function (error) {
                        console.log(error);
                        that.$message.error('删除任务失败！')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getWorkflowTable() {
                let that = this;
                let url = "http://192.168.1.5:9500/dbfg/workflow/tasks/all?pageSize=" + this.pageSize2 + '&pageNo=' + this.pageNo2;
                this.$axios.get(url).then(res => {
                    if (res.code === 200) {
                        for (let row of res.body.result) {
                            that.tableData2 = res.body.result;
                            if (row.status === "success" || row.status === "failed") {

                            } else {
                                let superviseTimer = setInterval(function () {
                                    let url = "http://192.168.1.5:9500/dbfg/workflow/tasks/" + row.id;
                                    that.$axios.get(url)
                                        .then(function (response) {
                                            if (response.code !== 200) {
                                                clearInterval(superviseTimer);
                                            } else {
                                                if (response.body.status === 'success' || response.body.status === 'failed') {
                                                    clearInterval(superviseTimer);
                                                    if (response.body.status === "failed") {
                                                        //没有成功的话，没有完成时间
                                                        row.status = "FAILED";
                                                        row.endtime = response.body.endtime;
                                                    } else {
                                                        row.status = "success";
                                                        row.endtime = response.body.endtime;
                                                    }
                                                }
                                            }
                                        })
                                }, 3000);
                            }
                        }
                        that.totalCount2 = parseInt(res.body.totalCount);
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error('未获取到数据!');
                })
            },
        },
        created() {
            this.getMonitorTable();
            this.getWorkflowTable();
        }
    }
</script>

<style>
    .mycontainer  .el-table__row{
        /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
        /*border: 1px solid #EBEEF5;*/
        background-color: #FFF;
        color: #000000;
        display: block;
        box-sizing: inherit;
        /*width: 1400px;*/
        /*margin-bottom: 15px*/
    }
    .mycontainer .el-table .cell {
        -webkit-box-sizing: border-box;
        /* box-sizing: inherit; */
        white-space: normal;
        word-break: break-all;
        /*line-height: 18px;*/
        width: 230px;
        text-align: center;
    }
    /*#monitorTable .el-button.is-circle {*/
        /*padding: 4px;*/
    /*}*/

    /*#monitorTable2 .el-button.is-circle {*/
        /*padding: 4px;*/
    /*}*/

    .delBtn :hover {
        color: #F56C6C;
    }

    .longWindow {
        min-height: 800px;
    }

    .shortWindow {
        min-height: 300px;
    }

    /*#missiontabs .el-tabs--border-card > .el-tabs__header .el-tabs__item {*/
        /*margin-top: 0.3rem;*/
    /*}*/


    /*#missiontabs .el-tabs__item {*/
        /*font-size: 0.2rem;*/
        /*margin-top: 0.2rem;*/
    /*}*/

    /*#missiontabs .el-tabs el-tabs--top .el-tabs--border-card {*/
        /*height: 50px;*/
    /*}*/

    /*#missiontabs .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {*/
        /*color: #409EFF;*/
        /*!* background-color: #FFF; *!*/
        /*!*border-right-color: #DCDFE6;*!*/
        /*!*border-left-color: #DCDFE6;*!*/
    /*}*/
</style>